import React, { Component, createRef } from 'react';
import Ref from './Ref';

class From extends Component {
  constructor() {
    super();
    this.state = {
      val1: '',
      val2: '',
      val3: '2',
      val4: ['play'],
      val5: '4'
    };
    this.refChild = createRef()
    this.formRef = createRef()
  }
  val1Handler(e) {
    this.setState({
      val1: e.target.value
    })
  }
  val2Handler(e) {
    this.setState({
      val2: e.target.value
    })
  }
  sexHandler(e) {
    // console.log(e.target.value);
    this.setState({
      val3: e.target.value
    })
  }
  val4Handler(e) {
    // console.log(e.target.value);
    let arr = this.state.val4;
    if(arr.includes(e.target.value)){
      // 为真需要删除
      arr.splice(arr.indexOf(e.target.value), 1)
    }else {
      // 为假需要添加
      arr.push(e.target.value);
    }
    this.setState({
      val4: arr
    })
  }
  val5Handler(e) {
    // console.log(e.target.value);
    this.setState({
      val5: e.target.value
    })
  }
  submit(e) {
    e.preventDefault();
    // 通过ref获取输入框
    // files是对应的文件
    console.log(this.formRef.current.files);
  }
  componentDidMount() {
    console.log(1111, this.refChild.current);
  }
  render() {
    return (
      <div>
        <Ref ref={this.refChild}></Ref>
        <p>表单控件</p>
        <p>受控组件：代码可以控制的组件，文本框、单选多选、下拉框</p>
        <p>非受控组件：文件上传</p>
        <hr />
        <input type="text" value={this.state.val1} onChange={(e)=>this.val1Handler(e)} />
        <p>{this.state.val1}</p>
        <textarea value={this.state.val2} onChange={(e)=>this.val2Handler(e)}></textarea>
        <p>{this.state.val2}</p>
        <p>性别：</p>
        <input name="sex" type="radio" checked={this.state.val3 === '1'} value="1" onChange={(e)=>this.sexHandler(e)} />男
        <input name="sex" type="radio" checked={this.state.val3 === '2'} value="2" onChange={(e)=>this.sexHandler(e)} />女
        <p>{this.state.val3}</p>
        <p>爱好：</p>
        <input name="hobby" type="checkbox" checked={this.state.val4.includes('sing')} value="sing" onChange={(e)=>this.val4Handler(e)} />sing
        <input name="hobby" type="checkbox" checked={this.state.val4.includes('dance')} value="dance" onChange={(e)=>this.val4Handler(e)} />dance
        <input name="hobby" type="checkbox" checked={this.state.val4.includes('rap')} value="rap" onChange={(e)=>this.val4Handler(e)} />rap
        <input name="hobby" type="checkbox" checked={this.state.val4.includes('play')} value="play" onChange={(e)=>this.val4Handler(e)} />play
        <p>{this.state.val4}</p>
        <p>地址：</p>
        <select value={this.state.val5} onChange={(e)=>this.val5Handler(e)}>
          <option value="1">京</option>
          <option value="2">津</option>
          <option value="3">沪</option>
          <option value="4">渝</option>
        </select>
        <p>{this.state.val5}</p>
        <hr />
        <hr />
        <form>
          {/* 非受控组件 */}
          <input ref={this.formRef} type="file" />
          <button onClick={(e)=>this.submit(e)}>submit</button>
        </form>
      </div>
    );
  }
}

export default From;
